<template>
  <div>
    <div class="wrapper">
       <div v-for="(item,index) in cartItems"
       :key="index"
       class="cart_item_container">
         <img :src="item.mainPic"/>
         <div>{{item.title}}</div>
         <div>{{item.originalPrice}}</div>
         <van-stepper v-model="item.count" />
         <input type="checkbox" :checked="item.checked"
         @click="onClick(item)"/>
       </div>
     </div>
    <div class="cart_tool_bar">
      全选
      <input type="checkbox" :checked="selectAll"
      @click="allSelected"/>
      <span>{{`总量：${totalCount}`}}</span>
      <span>{{totalPrice | spliceText | addTitle}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      
    }
  },
  methods:{
    onClick(item){
      console.log(event.target.checked);
      console.log(item)
      this.$store.dispatch("CHANGE_ITEM_STATUS",{id:item.id,checked:event.target.checked})
    },
    allSelected(){
      this.$store.dispatch("CHANGE_ALL_SELECTED",event.target.checked)
    }
  },
  computed:{
    cartItems:function(){
      return this.$store.state.cartItems
    },
    selectAll:function(){
      return this.$store.state.allSelected
    },
    totalCount:function(){
      return this.$store.state.totalCount
    },
    totalPrice:function(){
      return this.$store.state.totalPrice
    },
  },
  filters:{
    addTitle:function(text){
      return  "总价："+text
    },
    spliceText:function(text){
      return  parseFloat(text).toFixed(2);
    }
  }
}
</script>

<style scoped>
.cart_item_container
{
  width: 100%;
  height: 200px;
  border: 1px solid red;
}

.cart_item_container img
{
  width: 100px;
}

.cart_tool_bar
{
  width: 100%;
  background:white;
  height: 64px;
  position: fixed;
  left: 0px;
  bottom: 0px;
  font-size: 24px;
}
.wrapper
{
  margin-bottom: 64px;
}
</style>